<template>
	<div class="playerinformation">
		<el-form label-width="80px" class="searchform">
		  <el-form-item label="账号:">
		    <el-input v-model="searchform.phone" placeholder="请输入账号" clearable="" @clear="clear()"></el-input>
		  </el-form-item>
		  <el-form-item label="类型:">
			<el-select v-model="searchform.type">
				<el-option
				v-for="item in options"
				:key="item.value"
				:label="item.label"
				:value="item.value"
				@clear="clearOptions">
				</el-option>
			</el-select>
		  </el-form-item>
			
		</el-form>
		<el-button type="primary" @click="search()">查询</el-button>
		<el-button type="primary" @click="add">添加</el-button>
		
		  <el-table
		    :data="tableData"
		    border
			fit
			stripe=""
		    style="width: 100%"
			:header-cell-style="{textAlign: 'center'}"
			:cell-style="{ textAlign: 'center' }">
			<el-table-column
		      type="index"
		      label="序号"
		    >
		    </el-table-column>
			<el-table-column
			width="100px"
		      prop="id"
		      label="用户编号"
		    >
		    </el-table-column>
		    <!-- <el-table-column
		      prop="createDate"
		      label="日期"
		    >
		    </el-table-column> -->
			<el-table-column
		      prop="phone"
		      label="账号"
		    >
		    </el-table-column>
			<el-table-column
		      prop="name"
		      label="姓名"
		    >
		    </el-table-column>
		    
		    <el-table-column
		      prop="positionId"
		      label="职工编号"
		    >
		    </el-table-column>
		    <el-table-column
		      prop="type"
		      label="类型编号"
			  v-if="false"
			>
		    </el-table-column>
			<el-table-column
		      prop="typeName"
		      label="类型"
			>
		    </el-table-column>
			
		    <el-table-column
		      fixed="right"
		      label="操作"
		    >
		      <template slot-scope="scope">
				  <el-button type="text" size="small" @click="resetPassword(scope.row)">重置密码</el-button>
		        <el-button type="text" size="small" v-if="scope.row.type ==0" disabled>编辑</el-button>
				<el-button type="text" size="small" @click="edit(scope.row)" v-else>编辑</el-button>
				<el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
		  <div style="text-align:right;">
			  <el-pagination
			background
			layout="prev, pager, next"
			@current-change="current_change"
			:total="total"
			:current-page.sync="currentPage">
			</el-pagination>
		  </div>

		  <el-dialog title="添加用户" :visible.sync="dialogFormVisible" width="500px">
			<el-form :model="addform" :rules="rules" ref="addform" label-width="120px" class="demo-ruleForm">
				
				<el-form-item label="职工编号" prop="positionId">
					<!-- <el-input v-model="addform.positionId" style="width: 250px;"></el-input> -->
					<el-select v-model="addform.positionId" filterable placeholder="输入姓名搜索职工"
					 style="width: 250px;"
					:filter-method="searchPosition"
						@change="option3Change"
					>
						<el-option
						v-for="item in options3"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						<span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
		<span hidden>{{ item.phone }}</span>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="账号(手机)" prop="phone">
					<el-input v-model="addform.phone" style="width: 250px;" disabled></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="addform.password" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="type">
					<el-select v-model="addform.type" placeholder="请选择用户类型" style="width: 250px;">
						<el-option label="管理人员" value="1"></el-option>
						<el-option label="护理人员" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitAdd('addform')">确认</el-button>
					<el-button @click="resetForm('addform')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		

		<el-dialog title="修改信息" :visible.sync="dialogVisible2" width="500px">
		<el-form :model="editform" :rules="rules" ref="editform" label-width="120px" class="demo-ruleForm">
				
				<el-form-item label="类型:" prop="type">
					<el-select v-model="editform.type" placeholder="请选择用户类型" style="width: 250px;">
						<el-option
						v-for="item in options2"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				
				<div v-show="editform.type == 1">
					<el-form-item label="角色">
						<el-checkbox-group v-model="editform.roles">
							<el-checkbox v-for="item in role" :label="item.id" :key="item.id" name="type">{{item.name}}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</div>
				<el-form-item>
					<el-button type="primary" @click="submitForm('editform')">确认</el-button>
					<el-button @click="resetForm('editform')">重置</el-button>
				</el-form-item>
		</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		name:"UserList",
created() {
	//让第一个选项被选中
    this.searchform.type = this.options[0].value
  },
		data(){
			return{
				total:10,
				currentPage:1,
				//查询时的类型选项
				options: [{
				value: -1,
				label: '全部用户'
				}, {
				value: 0,
				label: '监护人员'
				}, {
				value: 1,
				label: '管理人员'
				}, {
				value: 2,
				label: '护理人员'
				}],
				//修改时的类型选项
				options2: [{
				value: 1,
				label: '管理人员'
				}, {
				value: 2,
				label: '护理人员'
				}],
				//添加时的职工选项
				options3: [],
				//查询条件放这个里
				searchform:{
					phone:'',
					type:''
				},
				rules:{
					 type: [
						{ required: true, message: '请选择类型', trigger: 'change' }
					],
					 password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
            			{ min: 6, max: 20, message: '长度在 6 到 20 位', trigger: 'blur' }
					],
					 positionId: [
						{ required: true, message: '请输入职工编号', trigger: 'blur' }
					],
					 phone: [
						{ required: true, message: '请输入职工手机', trigger: 'blur' }
					],
				},
				 tableData: [{
				          phone: '13711112222',
				          positionId: 1,
				          typeName: '管理人员',
						  type:1,
						  id:1,
						  name:'XXX'
				        }, {
				          phone: '13711112222',
				          positionId: '2',
				          typeName: '护理人员',
						  id:2,
						  type:2,
						  name:'XXX'
				        }, {
				          phone: '13711112222',
				          positionId: '3',
				          typeName: '管理人员',
						  type:1,
						  id:3,
						  name:'XXX'
				        }, {
				          phone: '13711112222',
				          positionId: '无',
				          typeName: '监护人员',
						  id:4,
						  type:0,
						  name:'XXX'
				        }, {
				          phone: '13711112222',
				          positionId: '无',
				          typeName: '监护人员',
						  id:5,
						  type:0,
						  name:'XXX'
				        },],
				//弹出添加表单
				dialogFormVisible: false,
				addform: {
				phone: '',
				password: '',
				positionId: '',
				type: ''
				},
				formLabelWidth: '120px',
				//弹出表单结束
				dialogVisible1: false,
				dialogVisible2: false,
				//修改用户信息的表单
				editform: {
					id:"",
					type: "",
					roles: []
				},
				userdata:{
					name:'xxx',
					sex:'男'
				},
				role: [],
				checkedRoles:[]
			}
		},
		methods:{
			
			//点击添加
			add(){
				this.addform.phone = '',
				this.addform.password = '',
				this.addform.positionId = '',
				this.addform.type = '',
				this.dialogFormVisible = true
			},
			//提交添加
			submitAdd(formName){
				console.log(this.addform)
				let positionId = this.addform.positionId
				this.$refs[formName].validate((valid) => {
				if (valid) {
					//先查询是否已存在此职工id的用户
				this.$axios.get(this.$global.zuulIp+'/user/userByPositionId?positionId='+positionId)
				.then(response => {
						console.log(response.data);
						if(response.data.id != null){
							this.$message.error('此职工已有账号！');
						}else{
							//发出添加用户的请求
							this.$axios.post(this.$global.zuulIp+'/user/userAdd', {
								phone:this.addform.phone,
								password:this.addform.password,
								positionId:positionId,
								type:this.addform.type
							})
							.then(response => {
								console.log(response);
								if(response.data){
										this.$message({
											type: 'success',
											message: '添加成功!'
										});
										this.dialogFormVisible = false
										this.userPage(1,null,-1)
									}else{
										this.$message.error('添加失败！');
									}
							})
							.catch(function (error) {
								console.log(error);
							});
						}
					})
					.catch(function (error) {
						console.log(error);
					});
					
					
				} else {
					console.log('error submit!!');
					return false;
				}
				});
			},
			//提交修改表单
			submitForm(formName) {
				console.log(this.editform)
				let arr = this.editform.roles
				let userId = this.editform.id
				let type = this.editform.type
				let roles = arr.join(',')
				this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$axios.get(this.$global.zuulIp+'/user/userEdit?userId='+userId+'&type='+type+'&roles='+roles)
					.then(response => {
						console.log(response);
						if(response.data){
								this.$message({
									type: 'success',
									message: '修改成功!'
								});
								this.dialogVisible2 = false
								this.currentPage = 1
								this.userPage(1,null,-1)
							}else{
								this.$message.error('修改失败！');
							}
					})
					.catch(function (error) {
						console.log(error);
					});
				} else {
					console.log('error submit!!');
					return false;
				}
				});
			},
			//重置表单
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			//清空搜索栏选项框
			clearOptions(){
				this.searchform.type = -1
			},
			//点击分页方法
			current_change:function(currentPage){
				this.currentPage = currentPage;
				console.log(this.currentPage)
				this.userPage(currentPage,this.searchform.phone,this.searchform.type)
			},
			//查看
			handleClick(row) {
				console.log(row);
				this.dialogVisible1 = true
			},
			//查询
			search(){
				this.currentPage = 1
				let phone = this.searchform.phone
				let type = this.searchform.type
				if(phone != null || type > -1){
					this.userPage(1,phone,type)
				}
			},
			//清空搜索名称框
			clear(){
				this.currentPage1 = 1
				this.userPage(1,null,this.searchform.type);
			},
			handleClose(done) {
				// this.$confirm('确认关闭？')
				// .then(_ => {
				// 	done();
				// })
				// .catch(_ => {});
				this.dialogVisible1 = false
			},
			//点击编辑
			edit(row){
				//清空角色数组并查询后添加进来
				this.role = []
				this.$axios.get(this.$global.zuulIp+'/role/roleAll')
				.then(response => {
					this.role = response.data
				})
				.catch(function (error) {
					console.log(error);
				});
				console.log(row)
				this.editform.id = row.id
				this.editform.type = row.type
				this.editform.roles = []
				this.dialogVisible2 = true
			},
			//删除
	  del(row) {
        this.$confirm('是否删除此用户？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
			this.$axios.get(this.$global.zuulIp+'/user/userDel?id='+row.id)
					.then(response => {
						console.log(response);
						if(response.data){
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.dialogVisible2 = false
								this.currentPage = 1
								this.userPage(1,null,-1)
							}else{
								this.$message.error('删除失败！');
							}
					})
					.catch(function (error) {
						console.log(error);
					});
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
	  resetPassword(row){
		  this.$confirm('是否重置密码'+row.id, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
			this.$axios.get(this.$global.zuulIp+'/user/resetPassword?id='+row.id)
			.then(response => {
				if(response){
					this.$message({
						type: 'success',
						message: '重置密码成功!新密码为666666'
					});
				}else{
					this.$message({
						type: 'defalt',
						message: '重置密码失败!'
					});
				}
			})
			.catch(function (error) {
				console.log(error);
			});
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置密码'
          });          
        });
	  },
	  //分页查询用户
	  userPage(pageNum,phone,type){
		  this.$axios.post(this.$global.zuulIp+'/user/userList', {
			pageNum: pageNum,
			pageSize: 5,
			phone:phone,
			type:type
		})
		.then(response => {
			console.log(response);
			this.total = response.data.pages * 10
			this.tableData = []
			let list = response.data.list
			for(let i = 0 ; i <list.length ; i ++){
				let data = list[i];
				let type = data.type
				let typeName = '监护人员'
				if(type == 1){
					typeName = '管理人员'
				}
				if(type == 2){
					typeName = '护理人员'
				}
				let gName = data.gName
				let pName = data.pName
				let name = gName
				if(gName == null){
					name = pName
				}
				if(gName == null && pName == null){
					name = '暂无'
				}
				let li = {
					id : data.id,
					phone : data.phone,
					name : name,
					typeName:typeName,
					type : type,
				    positionId: data.positionId == 0 ? '无' : data.positionId,
					guardianId: data.guardianId == 0 ? '无' : data.guardianId
				};
				this.tableData.push(li);
			}
		})
		.catch(function (error) {
			console.log(error);
		});
	  },
	  //搜索职工
	  searchPosition(name){
		  console.log(name)
		  this.$axios.get(this.$global.zuulIp+'/user/positionsByName?positionName='+name)
			.then(response => {
				this.options3 = []
				let list = response.data
				console.log(list)
				for(let i = 0 ; i <list.length ; i ++){
					let data = list[i];
					let option = {
						label : data.name,
						value: data.id,
						phone: data.phone
						};
						this.options3.push(option);
				}
			})
			.catch(function (error) {
				console.log(error);
			});
	  },
	  //改变选项时获取选择的那个选项
	  option3Change(data){
		  console.log(data)
		  var objVal={};
     this.options3.forEach((val)=>{
       if(val.value==data){
         objVal=val;
       }
     })
 console.log(objVal,'changedata');
      this.addform.phone = objVal.phone
	  }
		},
		mounted(){
			this.userPage(1,null,-1)
			
		}
	}
</script>

<style scoped="scoped">
	.searchform{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
</style>
